import React from 'react';
import { AppState } from '../types';

type TopNavigationProps = {
  onNewChat: () => void;
  onShare: () => void;
  onMenuClick: () => void;
  systemNotification?: string;
  state: AppState;
  dispatch: React.Dispatch<any>;
};

export const TopNavigation: React.FC<TopNavigationProps> = ({
  onNewChat,
  onShare,
  onMenuClick,
  systemNotification,
  state,
  dispatch
}) => {
  return (
    <header className="top-navigation">
      <div className="logo">MGX.dev</div>
      <button className="new-chat-btn" onClick={onNewChat}>New Chat</button>
      <div className="action-buttons">
        <button className="share-btn" onClick={onShare}>Share</button>
        <button className="menu-btn" onClick={onMenuClick}>Menu</button>
      </div>
      {systemNotification && (
        <div className="system-notification">{systemNotification}</div>
      )}
    </header>
  );
};